Angular Material এর MatDatepicker কম্পোনেন্ট ব্যবহার করে আপনি ডেট পিকার (Date Picker) তৈরি করতে পারেন। ডেট ফরম্যাট কাস্টমাইজ করা একটি সাধারণ চাহিদা, বিশেষত যখন আপনার অ্যাপ্লিকেশনের জন্য নির্দিষ্ট ডেট ফরম্যাট (যেমন dd/MM/yyyy, yyyy-MM-dd ইত্যাদি) প্রয়োজন হয়।

Angular Material এর MatDatepicker এবং Angular's DatePipe ব্যবহার করে ডেট ফরম্যাট কাস্টমাইজ করা যায়।

ডেট ফরম্যাট কাস্টমাইজ করার জন্য পদক্ষেপ

১. প্রয়োজনীয় মডিউল ইমপোর্ট করা

প্রথমে, MatDatepickerModule এবং MatNativeDateModule অথবা MatMomentDateModule (যদি আপনি Moment.js ব্যবহার করেন) আপনার app.module.ts ফাইলে ইমপোর্ট করতে হবে।

import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatInputModule } from '@angular/material/input';
import { MatNativeDateModule } from '@angular/material/core'; // Native date handling
import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [
    MatDatepickerModule,
    MatInputModule,
    MatNativeDateModule,
    FormsModule
  ]
})
export class AppModule {}

এখানে MatNativeDateModule ব্যবহার করা হয়েছে, যা ডিফল্টভাবে JavaScript এর Date অবজেক্ট ব্যবহার করে।

২. ডেট পিকার HTML কোড

এখন, আপনি <mat-datepicker> কম্পোনেন্ট ব্যবহার করে ডেট পিকার তৈরি করতে পারেন এবং ডেট ফরম্যাট কাস্টমাইজ করতে পারেন।

<mat-form-field appearance="fill">
  <mat-label>Pick a date</mat-label>
  <input matInput [matDatepicker]="picker" [(ngModel)]="selectedDate">
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

এখানে [(ngModel)]="selectedDate" ব্যবহার করে আপনি ডেট পিকার থেকে নির্বাচিত তারিখ সংগ্রহ করছেন।

৩. ডেট ফরম্যাট কাস্টমাইজ করা

ডেট ফরম্যাট কাস্টমাইজ করতে, Angular এর DatePipe ব্যবহার করা হয়। এটি Angular এর বিল্ট-ইন পিপ (Pipe), যা ডেটাকে আপনার প্রয়োজন অনুযায়ী ফরম্যাট করে।

import { Component } from '@angular/core';
import { DatePipe } from '@angular/common';

@Component({
  selector: 'app-date-picker',
  templateUrl: './date-picker.component.html',
  styleUrls: ['./date-picker.component.css'],
  providers: [DatePipe]
})
export class DatePickerComponent {
  selectedDate: Date;

  constructor(private datePipe: DatePipe) {}

  getFormattedDate() {
    // Date format: dd/MM/yyyy
    return this.datePipe.transform(this.selectedDate, 'dd/MM/yyyy');
  }
}

এখানে, getFormattedDate() মেথডটি selectedDate ফরম্যাট করবে, যা আপনি HTML টেমপ্লেটে ব্যবহার করতে পারবেন।

৪. ডেট ফরম্যাট HTML টেমপ্লেটে প্রদর্শন

আপনি Angular's DatePipe ব্যবহার করে ফরম্যাট করা তারিখটি HTML টেমপ্লেটে প্রদর্শন করতে পারেন।

<div>
  <mat-form-field appearance="fill">
    <mat-label>Pick a date</mat-label>
    <input matInput [matDatepicker]="picker" [(ngModel)]="selectedDate">
    <mat-datepicker #picker></mat-datepicker>
  </mat-form-field>

  <p>Selected Date: {{ getFormattedDate() }}</p>
</div>

এখানে, getFormattedDate() মেথডটি selectedDate কে dd/MM/yyyy ফরম্যাটে রূপান্তরিত করবে এবং HTML-এ প্রদর্শিত হবে।

৫. Moment.js ব্যবহার করে কাস্টম ডেট ফরম্যাট

আপনি যদি Moment.js ব্যবহার করতে চান, তাহলে MatMomentDateModule ব্যবহার করতে হবে। এটি Moment.js এর সাথে Angular Material এর ডেট পিকারকে একত্রিত করতে সহায়তা করে।

প্রথমে, moment এবং @angular/material-moment-adapter ইন্সটল করুন:

npm install moment
npm install @angular/material-moment-adapter

এখন, MatMomentDateModule ব্যবহার করে ডেট পিকার তৈরি করতে পারেন:

import { MatMomentDateModule } from '@angular/material-moment-adapter';

@NgModule({
  imports: [
    MatMomentDateModule
  ]
})
export class AppModule {}

এখন, আপনি Moment.js এর ফরম্যাট ব্যবহার করে ডেট কাস্টমাইজ করতে পারবেন:

import * as moment from 'moment';

@Component({
  selector: 'app-date-picker',
  templateUrl: './date-picker.component.html',
  styleUrls: ['./date-picker.component.css']
})
export class DatePickerComponent {
  selectedDate: moment.Moment;

  getFormattedDate() {
    // Moment.js এর মাধ্যমে কাস্টম ফরম্যাট
    return this.selectedDate.format('DD/MM/YYYY');
  }
}

এখানে, getFormattedDate() মেথডটি Moment.js ব্যবহার করে ডেটাকে DD/MM/YYYY ফরম্যাটে কাস্টমাইজ করছে।

Angular Material এর ডেট পিকার কম্পোনেন্ট ব্যবহার করে আপনি সহজেই কাস্টম ডেট ফরম্যাট প্রয়োগ করতে পারেন। Angular's DatePipe বা Moment.js ব্যবহার করে ডেট ফরম্যাট কাস্টমাইজ করা সম্ভব। Angular Material এর ডেট পিকার কম্পোনেন্ট অ্যাপ্লিকেশনে ব্যবহারকারীর জন্য একটি সুন্দর, ইন্টারঅ্যাকটিভ এবং ফাংশনাল ডেট পিকার প্রদান করে, যা ব্যবহারকারীদের জন্য সহজেই তারিখ নির্বাচন এবং প্রদর্শন করার সুযোগ দেয়।